<template>
    <app-dialog v-model="show" width="600px" style="top: 3vh" title="监控" @open="handleOpen">
        <el-form :model="formdata" label-width="134px" :inline="true" class="monitor_dialog_form">
            <el-form-item label="监控名称:">
                <el-input v-model="formdata.name" placeholder="输入监控名称" style="width: 336px" />
            </el-form-item>
            <el-form-item label="比赛时间:">
                <el-select v-model="formdata.day_type" placeholder="选择比赛时间" style="width: 336px">
                    <el-option label="今日" value="today" />
                    <el-option label="早盘" value="tomorrow" />
                </el-select>
            </el-form-item>
            <el-form-item label="监控平台:">
                <el-select v-model="formdata.bc_type" placeholder="选择平台"
                    style="width: 336px" @change="getleagues()">
                    <el-option v-for="item in bctypes" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </el-form-item>
            <el-form-item label="联赛选择:">
                <el-select v-model="formdata.league_id" collapse-tags :max-collapse-tags="2" multiple placeholder="选择联赛"
                    style="width: 336px">
                    <el-option v-for="item in leagues" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </el-form-item>
            <el-form-item label="盘口类型:">
                <el-select v-model="formdata.pk_type_name" collapse-tags :max-collapse-tags="2" multiple
                    placeholder="选择盘口类型" style="width: 336px">
                    <el-option v-for="(key, index) in Object.keys(Handicaps)" :key="key" :label="key" :value="key" />
                </el-select>
            </el-form-item>
            <!-- <el-form-item label="盘值:">
                <el-input-number v-model="formdata.pk_ratio" placeholder="输入盘值" :controls="false"
                    style="width: 160px" />
            </el-form-item> -->
            <el-form-item label="指数监控条件:">
                <el-select v-model="formdata.zs_condition" placeholder="选择指数监控条件" style="width: 336px">
                    <el-option label="上升" value="up" />
                    <el-option label="下降" value="down" />
                    <el-option label="上升或下降" value="up_down" />
                </el-select>
            </el-form-item>
            <el-form-item label="变化值:">
                <div class="range_input">
                    <input type="text" v-model="conditionvalue.min" placeholder="最小" />
                    <span>-</span>
                    <input type="text" v-model="conditionvalue.max" placeholder="最大" />
                </div>
            </el-form-item>
            <el-form-item label="间隔:">
                <el-input-number v-model="formdata.time" placeholder="输入间隔时间" :controls="false" style="width: 160px" />
            </el-form-item>

        </el-form>
        <template #footer>
            <el-button type="primary" class="submit" @click="clicksubmit">确定</el-button>
        </template>
    </app-dialog>
</template>

<script setup>
import { http } from '@/utils/http'
import { ElMessage, ElMessageBox } from 'element-plus'
const show = defineModel({ type: Boolean })
const emits = defineEmits(['change'])
const { monitorStore, monitorState } = inject('MonitorStore')
const formdata = ref({})
const Handicaps = ref({})
const bctypes = computed(() => {
    let a = []
    let b = JSON.parse(localStorage.userInfo)
    if (b.products.data_feed) {
        b.products.data_feed.list.forEach(item => {
            a.push({
                value: item.attr_code,
                label: item.attr_name
            })
        });
    }

    return a
})

const leagues = ref([])
const conditionvalue = ref({
    min: 0,
    max: 5
})
const handleOpen = () => {
    if (monitorState.activemonitor.task_code) {
        conditionvalue.value = {
            min: monitorState.activemonitor.zs_condition_value[0],
            max: monitorState.activemonitor.zs_condition_value[1]
        }
        formdata.value = {
            name: monitorState.activemonitor.name,
            pk_type: monitorState.activemonitor.pk_type,
            bc_type: monitorState.activemonitor.bc_type,
            pk_type_name: monitorState.activemonitor.pk_type_name,
            // pk_ratio: monitorState.activemonitor.pk_ratio,
            zs_condition: monitorState.activemonitor.zs_condition,
            zs_condition_value: monitorState.activemonitor.zs_condition_value,
            time: monitorState.activemonitor.time,
            day_type: monitorState.activemonitor.day_type,
            league_id: monitorState.activemonitor.league_id,
        }
        getleagues()
    } else {
        conditionvalue.value = {
            min: 0,
            max: 5
        }
        formdata.value = {
            name: '',
            pk_type: '',
            bc_type: '',
            pk_type_name: [],
            league_id: [],
            day_type: '',
            zs_condition: "down",
            zs_condition_value: [0, 5],
            time: 5
        }
    }
    getSearchHandicap()
    // getleagues()
}

const getSearchHandicap = () => {
    http.get('/zhishu/get_pk_key_data').then((res) => {
        Handicaps.value = res
    })

}

const getleagues = () => {
    http.get(`/zhishu/get_league_infos?bc_type=${formdata.value.bc_type}`).then((res) => {
        let a = []
        Object.values(res).forEach(item => {
            let b = {
                value: item.league_id,
                label: item.league_name
            }
            a.push(b)
        });
        leagues.value = a
    })
}

const clicksubmit = () => {

    let body = JSON.parse(JSON.stringify(formdata.value))
    body.zs_condition_value = [parseFloat(conditionvalue.value.min), parseFloat(conditionvalue.value.max)]
    // body.pk_ratio = parseFloat(formdata.value.pk_ratio)
    body.time = parseFloat(formdata.value.time)
    body.pk_type = []

    body.pk_type_name.forEach(item => {
        body.pk_type.push(Handicaps.value[item])
    });

    if (monitorState.activemonitor.task_code) {
        body.task_code = monitorState.activemonitor.task_code
        http.post('/zhishu/save_monitoring', body).then((res) => {
            show.value = false
            ElMessage({
                message: '修改成功',
                type: 'success',
            })
        })
    } else {
        http.post('/zhishu/save_monitoring', body).then((res) => {
            show.value = false
            ElMessage({
                message: '保存成功',
                type: 'success',
            })
        })
    }

}
</script>

<style lang="scss" scoped>
.submit {
    width: 60px;
    height: 32px;
    background-color: #e92937;
    border-color: #e92937;
    border-radius: 0;
}

.range_input {
    width: 160px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    padding: 0;
    justify-content: space-around;
    background-color: #fff;
    border-radius: 0;
    cursor: text;
    border: solid 1px #ebebeb;
    border: solid 1px #f3f5fd;

    input {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        border: none;
        outline: none;
        display: inline-block;
        height: 28px;
        line-height: 28px;
        margin: 0;
        padding: 0 4px 0 12px;
        width: 39%;
        text-align: left;
        font-size: 13px;
        color: #202630;
        background-color: transparent;
    }
}
</style>

<style>
.monitor_dialog_form .el-form-item__label {
    font-family: AlibabaPuHuiTi_2_55_;
    font-size: 14px;
    text-align: right;
    color: #000;
}

.monitor_dialog_form .el-input__wrapper,
.monitor_dialog_form .el-select__wrapper {
    border-radius: 0;
    height: 28px;
    border: solid 1px #ebebeb;
    background-color: #fff;
}

.monitor_dialog_form .el-input__inner {
    height: 28px;
}


.range_input input::placeholder {
    font-family: PingFangSC;
    font-size: 12px;
    line-height: 1.43;
    color: #b7bdc6;
}
</style>